﻿@page "/breadcrumb"
@page "/docs/guides/components/breadcrumb.html"
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    BreadCrumb
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The Radzen Blazor <strong>BreadCrumb</strong> component provides a navigation trail to help users keep track of their location. It consists of a horizontal row of links that represent the levels of the hierarchy that the user has navigated through.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos show hierarchical navigation breadcrumbs with clickable links representing different levels, including examples with custom templates and child content for enhanced visual presentation.
</RadzenText>

<RadzenText Anchor="breadcrumb#default-breadcrumb" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Default Radzen BreadCrumb
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Display a hierarchical navigation trail with clickable breadcrumb items showing the user's location.
</RadzenText>
<RadzenExample ComponentName="BreadCrumb" Example="BreadCrumbDefault">
    <BreadCrumbDefault />
</RadzenExample>

<RadzenText Anchor="breadcrumb#breadcrumb-template" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    BreadCrumb width template
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The optional Template can be defined using the <code>Template</code> Property of the <code>RadzenBreadCrumb</code> component. The Context is of Type <code>RadzenBreadCrumbItem</code>.
</RadzenText>
<RadzenExample ComponentName="BreadCrumb" Example="BreadCrumbTemplate">
    <BreadCrumbTemplate />
</RadzenExample>

<RadzenText Anchor="breadcrumb#breadcrumb-child-template" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    BreadCrumb with child content
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Define custom child content for breadcrumb items to include icons, badges, or other elements.
</RadzenText>
<RadzenExample ComponentName="BreadCrumb" Example="BreadCrumbChildContent">
    <BreadCrumbChildContent />
</RadzenExample>
